Background

We used 2 maps for the background from $theme-colors dan $colors.

<div class="bg-primary text-white">.bg-primary</div>
<div class="bg-accent">.bg-accent</div>
<div class="bg-dark text-white">.bg-dark</div>
<div class="bg-black text-white">.bg-black</div>
<div class="bg-cultured">.bg-cultured</div>
<div class="bg-pale-pink">.bg-pale-pink</div>
<div class="bg-medium-orchid">.bg-medium-orchid</div>
<div class="bg-eerie-black text-white">.bg-eerie-black</div>

Map

RGB color produced from separated SASS Maps:

$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg");

Utilities API

Utilities Background created from scss/components/bootstrap/_utilities.scss

"background-color": (
    property: background-color,
    class: bg,
    local-vars: (
        "bg-opacity": 1
    ),
    values: map-merge(
        $utilities-bg-colors,
        (
        "transparent": transparent
        )
    )
),